import { useState, useEffect, useRef } from 'react'
import PlayerManager from './icc/PlayerManager'
export default function WsPlayer(props) {
    const { playParams, width = 800, height = 600 } = props;
    const playerRef = useRef();
    useEffect(() => {
        const { rtspURL, wsURL, channelId } = playParams || {}
        if (!playerRef.current) {
            const player = new PlayerManager({
                el: "ws-real-player", /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/
                type: 'real', /** real - 实时预览  record - 录像回放 **/
                maxNum: 25,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
                num: 1,   /** 初始化，页面显示的路数 **/
                showControl: true, /** 是否显示工具栏，默认显示 **/
                prefixUrl: 'lib', /** 解码库所在位置的前缀 **/
                receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */
                    switch (methods) {
                        case 'initializationCompleted':
                            console.log('初始化完成')
                            playerRef.current = player;

                            playParams && playerRef.current.realByUrl({
                                rtspURL, // 必传
                                wsURL, // 必传
                                selectIndex: 0, // 播放窗口号
                                channelId, // 必传, 通道id
                                streamType: 0, // 必传, 码流类型，
                                playerAdapter: 'stretching', // 选传, selfAdaption 自适应 | stretching 拉伸
                                channelData: {  // 选传
                                    // id: channelCode, // {String} 通道编码 -- 用于预览，必填
                                    // deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
                                    // deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填
                                    // channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填
                                    // cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填
                                    // capability: capability, // {String} 能力集 -- 用于云台，选填
                                    // ...
                                }, // 选传
                            })
                            // 初始化完成，可调用播放方法（适用于动态加载解码库）
                            // 若回调未触发时就使用实时预览/录像回放，则无法播放。
                            // 此时我们可以调用一个
                            break;
                        case "changeStreamType": // 主/辅码流切换回调
                            console.log(data.channelData) // 通道数据
                            console.log(data.streamType) // 码流类型 0-主码流  1-辅码流1  2-辅码流2
                            console.log(data.selectIndex) // 窗口序号，从 0
                            break;
                        case "realSuccess": // 实时预览成功
                            console.log("实时预览成功")
                            break;
                        case "realError": // 实时预览失败
                            console.log("实时预览失败", err)
                            break;
                        case "talkError": // 对讲失败
                            console.log("对讲失败");
                            break;
                        case 'selectWindowChanged': // 选中的窗口发生改变
                            console.log(data, "返回窗口信息")
                            break;
                        case 'windowNumChanged': // 播放器显示的路数发生改变
                            console.log(data, "返回显示的窗口数量")
                            break;
                        case 'closeVideo': // 视频关闭回调
                            // 点击关闭按钮引发的视频关闭进行提示
                            // 切换视频引发的视频关闭不进行提示
                            if (!data.changeVideoFlag) {
                                console.log(`窗口${data.selectIndex}的视频已关闭`)
                            }
                            break;
                        case 'statusChanged': // 视频状态发生改变

                            break;
                        case 'errorInfo': // 错误信息汇总
                            console.log(data, "可打印查看错误消息");
                            break;
                        default:
                    }
                }
            })
        } else {
            playParams && playerRef.current.realByUrl({
                rtspURL, // 必传
                wsURL, // 必传
                selectIndex: 0, // 播放窗口号
                channelId, // 必传, 通道id
                streamType: 0, // 必传, 码流类型，
                playerAdapter: 'stretching', // 选传, selfAdaption 自适应 | stretching 拉伸
                channelData: {  // 选传
                    // id: channelCode, // {String} 通道编码 -- 用于预览，必填
                    // deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
                    // deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填
                    // channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填
                    // cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填
                    // capability: capability, // {String} 能力集 -- 用于云台，选填
                    // ...
                }, // 选传
            })
        }
    }, [playParams])


    return (
        <div id="ws-real-player" style={{
            width,
            height
        }}>


        </div>
    );
}